    <template>
    <div>
        <h6 class="c-g-content c-infor-title">
            <span>课程大纲</span>
        </h6>
        <el-row class="tac" style="margin-top: 10px;">
            <el-col :span="24">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo">
                <el-submenu v-for="(chapter, i) in chapterList" :key="i" :index="i.toString()">
                    <template slot="title">
                    <div style="text-align:left">
                        <span style="font-weight: bold;">章节 {{i + 1}}：</span><span>{{chapter.title}}</span>
                    </div>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item v-for="(video, i) in chapter.videoList" :key="video.vedioId" :index="i.toString()" style="text-align:left">
                        视频 {{i + 1}}：{{video.title}}
                    </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
    </template>

    <script>
    export default {
    name: 'Syllabus',
    data() {
        return {
            fileList: [],
            video: {
                title: '',
                sort: 0,
                free: 0,
                videoSourceId: '',
                videoOriginalName: ''//视频名称
            },
            chapterList: [
                {
                    title: "学习如何使用 Java",
                    videoList: [
                        {
                            title: "学习 for 循环",
                            vedioId: "000000"
                        },
                        {
                            title: "学习 while 循环",
                            vedioId: "000001"
                        }
                    ]
                },
                {
                    title: "学习如何使用 C++",
                    videoList: [
                        {
                            title: "学习 for 循环",
                            vedioId: "000002"
                        },
                        {
                            title: "学习 while 循环",
                            vedioId: "000003"
                        }
                    ]
                }
            ],
        }
    },
    methods:{
    }
    }
    </script>

    <style scoped>
    .el-menu-item.is-active {
        background-color: white !important;
    }
    .el-menu-item:hover {
        background-color: white !important;
    }
    </style>